<template>
	<view class="info_details">
		<view class="neighbor_li_item">
			<view class="li_item_top">
				<image class="li_item_top_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/z_t@2x.png'" mode=""></image>
				<view class="li_item_top_tit">
					<text>hello, uniapp</text>
					<text style="margin-right: 10rpx;">{{pageinfo.created_at}}</text><text>发布</text>
				</view>
			</view>
			<view class="li_item_con">
				<view class="item_con_txt">
					<text style="color: #34c29e; margin-right: 10rpx;"  v-for="(v,n) in pageinfo.label">#{{v}}</text>
					<text>{{pageinfo.content}}</text>
				</view>
				<view class="item_con_img">
					<!-- -->
					<image class="item_con_imgs"  v-for="(v,n) in pageinfo.images"  :src="v" mode=""></image>
				</view>
			</view>
			<view class="li_item_foo">
				<view class="foo_give" @click="dianzan">
					<image v-if="pageinfo.is_like" class="foo_give_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/z_z_s.png'" mode=""></image>
					<image v-if="!pageinfo.is_like" class="foo_give_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/z_z_n.png'" mode=""></image>
					<text class="foo_give_txt">2123</text>
				</view>
				<view class="foo_give">
					<image class="foo_give_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/z_p@2x.png'" mode=""></image>
					<text class="foo_give_txt">2123</text>
				</view>
			</view>
		</view> 
		<scroll-view class="info_evaluate" scroll-y>
			<text class="in_eva_tit">
				全部评价({{commentlist.length||0}})
			</text>
			<view class="in_eva_list">
				<view class="in_eva_item" v-for="(v,n) in commentlist">
					<image :src="'https://community.chuangxiangdianli.com/images/neighborimg/user.png'" mode=""></image>
					<view class="in_eva_item_fr">
						<text>{{v.user.username}}</text>
						<text>{{v.created_at}}</text>
						<!-- {{v.content}} -->
						<text  @click="open_message_send(v)">{{v.content}}</text>
						<view class="reply_list">
							<view class="reply_li_item" v-for="item in v.children">
								<text style="margin-right: 20rpx;">{{item.user.username}}: </text>
								<text style="font-size: 26rpx; margin: 0;">{{item.content}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="info_footer">
			<input type="text" @confirm="comitcomment" placeholder="输入对话内容" v-model="commentstr" class="in_foo_input"/>
			<view class="in_foo_fl">
				<image class="foo_give_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/z_z_s.png'" mode=""></image>
				<text>125</text>
			</view>
			<view class="in_foo_fr">
				<image class="foo_give_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/z_p@2x.png'" mode=""></image>
				<text>125</text>
			</view>
		</view>
		<!-- 发布留言的弹框 -->
		<u-popup
		  v-model="show_message_modal"
		  mode="bottom"
		  height="300rpx"
		  @close="close_message_modal"
		>
		  <view class="message-modal">
		    <view class="input">
		      <input
		        type="text"
		        placeholder="留下你的精彩留言吧"
		        v-model="message_send_text"
				@keyup.enter="send_message"
		      />
		      <image
		        src="https://community.chuangxiangdianli.com/images/neighborimg/market/liuyan_fabu.png"
		        mode=""
				@click="send_message"
		      ></image>
		    </view>
		  </view>
		</u-popup>
	</view>
</template>

<script>
	import request from '@/utils/request.js'	
	export default {
		data() {
			return {
				commentstr:'',
				id:'',
				pageinfo:'',
				commentlist:[],
				isInformation:false,
				show_message_modal: false,
				message_send_text: "",
				pid:null
				// 发布留言的内容
			};
		},
		onLoad(opt) {
			this.id=opt.id
			if(opt.from){
				this.redinfo()
			}
			
			this.renderpage()
		},
		methods:{
			// 打开留言
			open_message_send(item) {
				if(item){
					this.pid = item.id
				}
			  this.show_message_modal = true;
			},
			send_message(){
					if(this.message_send_text.length==0){
						uni.showToast({
							title:"评论不能为空",
							icon:"none"
						})
						return
					}
					  let that = this
					  request.post({
						  url:'Mini/circle/circleComment',
						  data:{
							 pid:this.pid,
							 circle_id:this.id,
							 content:this.message_send_text
						  }
					  }).then(res=>{
						  // console.log(res)
						  if(res.code==200){
							uni.showToast({
								title:res.msg
							})
							this.message_send_text = ''
							this.pid = null
							this.show_message_modal = false
							this.renderpage()
						  }else{
							  uni.showToast({
							  	title:res.msg
							  })
						  }
					  })
			},
			close_message_modal() {
			  // console.log(11111);
			  this.message_send_text = "";
			},
			renderpage(){
				this.getCircle()
				this.getcomment()
			},
			dianzan(v){
				var that=this
				this.$mrequest2({
					url:'Mini/circle/like',
					method:'GET',
					data:{
						circle_id:this.pageinfo.id
					}
				}
				).then((res)=>{ 
					uni.showToast({
						title:res.msg,
						success: () => {
							that.pageinfo.is_like=!that.pageinfo.is_like
							console.log(that.pageinfo.is_like)
						}
					})
				})
			},
			//标记已读
			redinfo(){
				this.$mrequest2({
					url:'Mini/circle/readNotice',
					method:'GET',
					data:{
						ids:this.id
					}
				}
				).then((res)=>{
				
				})
			},
			getCircle(){
				this.$mrequest2({
					url:'Mini/circle/getCircle/'+this.id,
					method:'GET',
					data:{
						id:this.id
					}
				}
				).then((res)=>{
					if(typeof res.data.images=="string"){
						res.data.images=JSON.parse(res.data.images)
					}
					console.log(res.data.images)
					this.pageinfo=res.data
				})
			},
			getcomment(){
				this.$mrequest2({
					url:'Mini/circle/circleComment/'+this.id,
					method:"GET"
				}
				).then((res)=>{
					this.commentlist=res.data
					
				})
			},
			comitcomment(){
				if(this.commentstr.length==0){
					uni.showToast({
						title:"评论不能为空",
						icon:"none"
					})
					return
				}
				this.$mrequest2({
					url:'Mini/circle/circleComment',
					data:{
						circle_id:this.id,
						content:this.commentstr
					}
				}
				).then((res)=>{
					uni.showToast({
						title:res.msg,
						success: () => {
							this.getcomment()
							this.commentstr=''
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.info_details {
		margin-bottom: 100rpx;
		height: 100vh;
		background-color: #f6f6f6;

		.neighbor_li_item {
			padding: 30rpx;
			margin-bottom: 26rpx; 
			background: #fff;
			box-shadow: 0px 5rpx 13rpx 0px rgba(159, 174, 168, 0.14);
			border-radius: 30rpx;

			.li_item_top {
				display: flex;
				height: 90rpx;

				.li_item_top_img {
					margin-right: 20rpx;
					width: 89rpx;
					height: 89rpx;
					border-radius: 50%;
				}

				.li_item_top_tit {
					font-size: 24rpx;
					color: #999;
					line-height: 45rpx;

					& text:nth-child(1) {
						color: #333;
						font-size: 30rpx;
						display: block;
					}
				}
			}

			.li_item_con {
				min-height: 280rpx;

				.item_con_txt {
					margin: 20rpx 0;
					font-size: 24rpx;
					color: #999;
				}

				.item_con_img {
					margin: 10rpx 0;
					

					.item_con_imgs {
						width: 200rpx;
						height: 200rpx;
					}
				}
			}

			.li_item_foo {
				display: flex;
				justify-content: space-between;
				height: 90rpx;
				line-height: 90rpx;

				.foo_give {
					margin-right: 20rpx;
					display: flex;

					.foo_give_img {
						margin: auto 10rpx auto 0;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
		
		.info_evaluate{
			padding: 28rpx;
			width: calc(100% - 56rpx);
			background-color: #fff;
			height: calc(100vh - 650rpx); 
		 	.in_eva_tit{ 
				display: block;
				height: 60rpx;
		 		color: #34c39e;
		 		font-size: 30rpx;
		 	}
			.in_eva_list{
				.in_eva_item{
					margin-top: 20rpx;
					display: flex;
					image {
						margin-right: 28rpx;
						width: 58rpx;
						height: 58rpx;
						flex-shrink: 0;
					}
					.in_eva_item_fr{
						width: 87%;
						&>text{
							display: block;
							width: 100%;
						}
						& text:nth-child(1){
							display: block;
							font-size: 26rpx;
							color: #666;
						}
						& text:nth-child(2){
							display: block;
							margin: 10rpx 0;
							font-size: 18rpx;
							color: #999;
						}
						& text:nth-child(3){
							font-size: 30rpx;
							color: #333;
						}
						.reply_list{
							margin-top: 30rpx;
							background-color: #f6f6f6;
							.reply_li_item{
								display: flex;
								font-size: 26rpx;
								height: 60rpx;
								line-height: 60rpx;
								color: #999;
							}
						}
					}
				}
			}
		}
	}

		.info_footer{
			position: fixed;
			width: 100%;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			padding: 0 22rpx;
			height: 99rpx;
			line-height: 99rpx;
			.in_foo_input{
				margin: auto 0;
				padding-left: 20rpx;
				width: 434rpx;
				border-radius: 30rpx;
				height: 59rpx;
				background: #f6f6f6;
			}
			.foo_give_img{
				margin: auto 0;
				width: 35rpx;
				height: 35rpx;
			}
			.in_foo_fl,
			.in_foo_fr{
				display: flex;
				justify-content: space-between;
				width: 100rpx;
			} 
		}
		.message-modal {
		  width: 100%;
		  height: 100%;
		  box-sizing: border-box;
		  padding-bottom: 2rpx;
		  display: flex;
		  align-items: flex-end;
		  .input {
		    width: 100%;
		    height: 76rpx;
		    background: #ffffff;
		    box-shadow: 0px 0px 13rpx 0px rgba(164, 164, 164, 0.17);
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    box-sizing: border-box;
		    padding: 0 24rpx;
		    input {
		      width: 670rpx;
		      height: 100%;
		    }
		    image {
		      width: 54rpx;
		      height: 54rpx;
		    }
		  }
		}
</style>
